<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			 window.onload = function(){
			 	
			 	//获取body元素
//			 	var body = document.getElementsByTagName("body")[0];

			//在document中有一个属性body，它保存的是body的引用
			 	var body = document.body;
			 	//获取根元素
			 	var html = document.documentElement;
			 	//获取所有的元素
			 	var all = document.all;
			 	for(var i=0; i<all.length;i++ ){
//			 		console.log(all[i]);
			 	}
				//根据元素的class属性值查询一组元素节点对象
				//getElementsByClassName()根据class属性获取一组元素节点对象
			 	//但是该方法不支持IE8及以下的浏览器
			 	var bcn =  document.getElementsByClassName("box1");
//			 	console.log(bcn.length);
//				console.log(bcn)

				//获取页面上所有的div元素
				var alldiv = document.getElementsByTagName("div")
//				console.log(alldiv);
				
				
				//获取class为box1的所有的div
				
				/*document.querySelector()
					--需要一个选择器的字符作为参数，可以根据一个CSS选择器来查询一个元素节点对象
					--虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
					--使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				* */
				var div = document.querySelector(".box1 div");
				var box1 = document.querySelector(".box1");
//				console.log(div.innerHTML);
//				console.log(box1.innerHTML)
				
				//querySelectorAll
//					--该方法和querySelector()用法类似,不同的是它会将符合的元素封装到一个数组中返回
//					--即使符合条件的只有一个,它也会返回数组
			 	var	box1 = document.querySelectorAll(".box1");
			 	var	box1 = document.querySelectorAll("#box1");
			 	console.log(box1);
				
				
				
			 }
			 
			 
		</script>
	</head>
	<body>
		<div class="box1">
			<div>获取到box1里面的div</div>
		</div>
		<div class="box1">
			<div>获取到box1里面的div</div>
		</div>
		<div class="box1">
			<div>获取到box1里面的div</div>
		</div>
	</body>
</html>
